<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>后台管理</title>
    <link rel="icon" href="${pageContext.request.contextPath}/lib/static/login/images/favicon.ico">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/lib/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/lib/static/common/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/lib/layui/layui.js" charset="utf-8"></script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>树形菜单</legend>
        </fieldset>
    </div>
    <hr class="layui-bg-red">
</div>
    <a class="layui-btn layui-btn-primary" onclick="window.location.href='index_list.html';">刷新</a>
    <a class="layui-btn layui-btn-primary" onclick="add(null);">新增一行</a>
    <a class="layui-btn layui-btn-primary" onclick="getCheckData();">获取选中行数据</a>
    <a class="layui-btn layui-btn-primary" onclick="getCheckLength();">获取选中数目</a>
    <a class="layui-btn layui-btn-primary" onclick="print();">打印缓存对象</a>
    <div>
    <table class="layui-hidden" id="listTable" lay-filter="listTable"></table>
    </div>
    <script>
    var editObj=null,ptable=null,dltable=null,tableId='listTable',layer=null;
    layui.config({
    base: '${pageContext.request.contextPath}/lib/layui/extend/'
    }).extend({
    dltable:'dltable'
    }).use(['jquery','dltable','layer'], function(){
    var $=layui.jquery;
    dltable = layui.dltable;//很重要
    layer=layui.layer;
    ptable=dltable.render({
    id:tableId
    ,elem: '#'+ tableId
    ,idField:'id'
    ,url:'${pageContext.request.contextPath}/lib/static/common/json/listData.json'
    ,cellMinWidth: 100
    ,treeId:'id'//树形id字段名称
    ,treeUpId:'pId'//树形父id字段名称
    ,treeShowName:'name'//以树形式显示的字段
    ,cols: [[
    {type:'checkbox'}
    ,{width:100,title: '操作', align:'center'/*toolbar: '#barDemo'*/
    ,templet: function(d){
    var html='';
    var addBtn='<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add">添加</a>';
    var delBtn='<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>';
    return addBtn+delBtn;
    }
    }
    ,{field:'name', edit:'text',width:300, title: '水果名称'}
    ,{field:'id',width:100, title: 'id'}
    ,{field:'pId', title: 'pid'}
    ]]
    ,page:false
    });

    dltable.on('tool('+tableId+')',function (obj) {
    if(obj.event === 'del'){//删除行
    del(obj);
    }else if(obj.event==="add"){//添加行
    add(obj);
    }
    });
    });

    function del(obj) {
    layer.confirm("你确定删除数据吗？如果存在下级节点则一并删除，此操作不能撤销！", {icon: 3, title:'提示'},
    function(index){//确定回调
    obj.del();
    layer.close(index);
    },function (index) {//取消回调
    layer.close(index);
    }
    );
    }


    var i=1000;
    //添加
    function add(pObj) {
    var pdata=pObj?pObj.data:null;
    console.log(pdata);
    var param={};
    param.name='水果'+Math.random();
    param.id=++i;
    param.pId=pdata?pdata.id:null;
    dltable.addRow(tableId,pdata?pdata.LAY_TABLE_INDEX+1:0,param);
    }

    function print() {
    console.log(dltable.cache[tableId]);
    var loadIndex=layer.msg("对象已打印，按F12，在控制台查看！", {
    time:3000
    ,offset: 'auto'//顶部
    ,shade: 0
    });
    }

    function openorclose() {
    var map=dltable.getDataMap(tableId);
    var o= map['102'];
    dltable.treeNodeOpen(o,!o.is_open);
    }

    function getCheckData() {
    var checkStatus = dltable.checkStatus(tableId)
    ,data = checkStatus.data;
    layer.alert(JSON.stringify(data));
    }
    function getCheckLength() {
    var checkStatus = dltable.checkStatus(tableId)
    ,data = checkStatus.data;
    layer.msg('选中了：'+ data.length + ' 个');
    }
    </script>
</body>
</html>
